<template>
<scroll class="content">
  <!-- <div class="seller" ref="seller"> -->
    <div class="seller-wrapper">
      <div class="header">
        <div class="title-top">
          <span class="title">{{seller.name}}</span>
          <div class="bottom">
          <span class="star"><van-rate allow-half color="red" size="14px" v-model="value" readonly /></span>
          <span class="count">({{seller.sellCount}})</span>
          <span class="sell">月售{{seller.sellCount}}单</span>
          </div>
          <!-- <div class="favorite">
            <span class="iconfont" :class="{'active':favorite}">&#xe615;</span>
            <span class="text">{{favoriteText}}</span>
          </div> -->
        </div>
        <!-- <div class="line"></div> -->
        <div class="price-info">
          <div class="price">
            <span class="wating">起送价</span>
            <span class="num">{{seller.minPrice}}<span class="one">元</span></span>
          </div>
          <div class="price">
            <span class="wating">商家配送</span>
            <span class="num">{{seller.deliveryPrice}}<span class="one">元</span></span>
          </div>
          <div class="price">
            <span class="wating">平均配送时间</span>
            <span class="num">{{seller.deliveryTime}}<span class="one">分钟</span></span>
          </div>
        </div>
      </div>
      <!-- <splice></splice> -->
      <line-throw></line-throw>
      <div class="activity">
        <h1 class="title">公告与活动</h1>
        <h1 class="title">公告与活动</h1>
        h1 class="title">公告与活动</h1>
        <!-- <div class="info"><span class="bulletin">{{seller.bulletin}}</span></div> -->
      </div>
      <!-- <div class="line"></div> -->
       <div class="discount">
         <!-- <ul class="descrae">
              <li class="list" v-for="item in seller.supports" :key="item.type">
                <span class="icon" :class="clasmap[item.type]"></span>
                <span  class="desc">{{item.description}}</span>
                <div class="lines"></div>
              </li>
            </ul> -->
       </div>
       <!-- <splice></splice> -->
       <line-throw></line-throw>
       <div class="live-view">
         <h1 class="title">商家实景图</h1>
         <div class="view">
           <ul class="pics">
             <li class="pic" v-for="(item,index) in seller.pics" :key="index">
               <img :src="item" width="120" height="100">
             </li>
           </ul>
         </div>
       </div>
       <!-- <splice></splice> -->
       <div class="seller-info">
         <h1 class="title">商家信息</h1>
         <ul class="infobox">
           <li class="item" v-for="(item,index) in seller.infos" :key="index">{{item}}</li>
         </ul>
       </div>
    </div>
  <!-- </div> -->
</scroll>
</template>
<script>
import BScroll from 'better-scroll'
import LineThrow from '../components/linetrown/LineThrow'
import Scroll from '../components/scroll/Scroll'
export default {
  name: 'Seller',
  data () {
    return {
      value: this.seller.score,
      scroll: null
    }
  },
  props: {
    seller: {
      type: Object
    }
  },
  methods: {
    initscroll () {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.seller, {
          click: true
        })
      } else {
        this.scroll.refresh()
      }
    }
  },
  mounted () {
    this.initscroll()
  },
  components: {
    LineThrow,
    Scroll
  }
}
</script>
<style lang="scss" scoped>
    .content{
      height: 100vh;
      background-color: red;
        overflow: hidden;
      .seller-wrapper{
        // width: 100%;
        // height: 100%;
        .header{
           padding: 18px;
           position: relative;
           .title-top{
             .title{
               font-size: 18px;
               line-height: 18px;
               font-weight: 600;
             }
             .bottom{
               display: flex;
               margin: 8px 12px 18px 0;
               .count{
                  font-size: 14px;
                  margin: 0 8px;
               }
             .sell{
               font-size: 14px;
               color: rgb(77,85,93);
               line-height: 18px;
             }
             }
            //  .favorite{
            //    position: absolute;
            //    right: 18px;
            //    top: 18px;
            //    display: flex;
            //    flex-direction: column;
            //    text-align: center;
            //    .iconfont{
            //      font-size: 24px;
            //      line-height: 24px;
            //      color: rgb(152, 153, 149);
            //      &.active{
            //        color: rgb(240,20,20);
            //      }
            //    }
            //    .text{
            //      color: rgb(77,85,93);
            //      font-size: 14px;
            //      line-height: 14px;
            //    }
            //  }
           }
          //  .line{
          //    width: 100%;
          //    height: 1px;
          //    background: rgb(177, 170, 170);
          //  }
           .price-info{
             display: flex;
             justify-content: space-around;
             padding-top: 18px;
             .price{
               display: flex;
               flex-direction: column;
              //  border-right: 1px solid darkgray;
               .wating{
                 font-size: 14px;
                 line-height: 14px;
                 color: darkgray;
               }
               .num{
                 margin-top: 4px;
                 font-size: 26px;
                 line-height: 26px;
                 font-weight: 200;
                 .one{
                   font-size: 14px;
                   margin-left: 2px;
                 }
               }
             }
           }
        }
        .activity{
          padding: 18px;
          .title{
            font-size: 20px;
            font-weight: 600;
          }
          // .info{
          //   margin-top: 8px;
          //   padding: 0 12px;
          //   .bulletin{
          //     color: rgb(240,20,20);
          //     font-size: 16px;
          //     line-height: 28px;
          //   }
          // }
        }
        // .line{
        //   width: 90%;
        //   height: 1px;
        //   background: rgb(223, 216, 216);
        //   margin: 0 auto;
        // }
        .discount{
          // // padding: 18px;
          // .descrae{
          //   //  margin-top: 24px;
          //   //  margin-bottom: 28px;
          //   padding: 0 30px;
          //    .list{
          //      margin-top: 12px;
          //      .icon{
          //         display: inline-block;
          //          width: 18px;
          //          height: 18px;
          //         //  margin-right: 6px;
          //          &.decrease{
          //          background-image: url('decrease_1@2x.png');
          //          background-size: 18px 18px;
          //          }
          //          &.discount{
          //            background-image: url('discount_1@2x.png');
          //            background-size: 18px 18px;
          //          }
          //          &.guarantee{
          //            background-image: url('guarantee_1@2x.png');
          //            background-size: 18px 18px;
          //          }
          //          &.invoice{
          //            background-image: url('invoice_1@2x.png');
          //            background-size: 18px 18px;
          //          }
          //          &.special{
          //            background-image: url('special_1@2x.png');
          //            background-size: 18px 18px;
          //          }
          //      }
          //      .desc{
          //        font-size: 14px;
          //        font-weight: 300;
          //        line-height: 14px;
          //      }
          //      .lines{
          //        width: 100%;
          //        height: 1px;
          //        background: rgb(228, 225, 225);
          //        margin-top: 12px;
          //      }
          //    }
          //  }
        }
        .live-view{
          padding: 18px;
            .title{
               font-size: 18px;
               margin-bottom: 10px;
            }
            .view{
              width: 100%;
              height: 100px;
              overflow: hidden;
              .pics{
                display: flex;
                // white-space: nowrap;
                .pic{
                  margin: 10px 4px;
                  // display: inline-block;
                }
              }
            }
        }
        .seller-info{
          padding: 18px;
          .title{
             font-size: 18px;
             padding-bottom: 10px;
             font-weight: 500;
             border-bottom: 0.4px solid darkgray;
          }
          .infobox{
            // padding: 0 12px;
            .item{
              padding: 16px 12px;
              line-height: 16px;
              font-size: 14px;
              border-bottom: 0.4px solid darkgray;
              &:last-child{
                border-bottom: none;
             }
            }
          }
        }
      }
    // }
    }
</style>
